<template>
  <CheckInContainer :btn1-callback="$router.back" :btn2-callback="save">
    <div class="my-card">
      <div class="order-extra-area">
        <div class="page-header q-pa-sm">Check In Form</div>
      </div>
      <q-card flat class="row no-bg">
        <div class="col-6 p-status">
          <q-card-section>
            <div class="row p-status-field">
              <div class="col-12 fal q-pa-sm">
                <div class="weight">Status -</div>
                <div class="status-box" v-if="parts" :class="getStatusColor(parts?.last_status)">
                  <q-tooltip v-if="parts" class="bg-indigo" :offset="[10, 10]">
                    {{ parts.last_status }}
                  </q-tooltip>
                </div>
              </div>
              <div class="col-12 fal q-pa-sm">
                <div class="weight">Stock Code :</div>
                <div v-if="parts">{{ parts.stock_code }}</div>
              </div>

              <div class="col-12 fal q-pa-sm">
                <div class="weight">Serial No. :</div>
                <div v-if="parts">{{ parts.serial_no }}</div>
              </div>
              <div class="fal col-12 q-pa-sm">
                <div class="weight">Defit from Car:</div>
                <div v-if="parts">{{ parts.car }}</div>
              </div>
              <div class="fal col-12 q-pa-sm">
                <div class="weight">Workgroup:</div>
                <div v-if="parts">{{ parts.workgroup }}</div>
              </div>

              <div class="fal col-12 q-pa-sm">
                <div class="weight">System:</div>
                <div v-if="parts">{{ parts.system }}</div>
              </div>

              <div class="fal col-12 q-pa-sm">
                <div class="weight">Equipment:</div>
                <div v-if="parts">
                  {{ parts.is_parent ? parts.lv4 : parts.lv5 }}
                </div>
              </div>
            </div>
          </q-card-section>
        </div>

        <div class="col-6" v-if="parts && parts.lv5.length == 0">
          <PartsMap mode="part" v-if="parts && parts.serial_no != ''" :item="parts"></PartsMap>
        </div>
      </q-card>
      <!--  <div class="row items-center justify-end">
        <div class="weight">Form Type:</div>
        <q-select
          class="input-css"
          borderless
          style="width: 20rem"
          :dense="true"
          v-model="formType"
          :options="['Maintenance', 'IGI']"
        />
      </div> -->

      <q-card v-if="formType == 'Maintenance'">
        <div class="col-12 q-pa-sm">
          <!-- <q-tabs
            v-model="tab"
            dense
            activeBgColor="white"
            indicator-color="primary"
            content-class="tabs-css"
            align="justify"
            style="background-color: #dae3f4"
            narrow-indicator
            no-caps
          >
            <q-tab
              style="width: 100px"
              name="return"
              :label="igiform ? 'IGI Form' : 'Return Label (Part 1)'"
            />
            <q-tab
              v-if="!igiform"
              style="width: 100px"
              name="part2"
              label="Part 2"
            />
          </q-tabs> -->
          <div class="q-ma-md sub-header">{{ igiform ? 'IGI Form' : 'Return Label (Part 1)' }}</div>

          <q-separator inset />
          <div class="row">
            <!-- <q-tab-panels v-model="tab" animated class="col-12"> -->
            <!-- <q-tab-panel name="return"> -->
            <div class="col-12">
              <CheckInForm1 v-if="parts" :location="parts.car" :serial_no="parts.serial_no"
                :stock_code="parts?.stock_code" :description="parts?.description" :workgroup="parts.workgroup"
                :equipment="parts.is_parent ? parts.lv4 : parts.lv5" :defit_from_car="parts.car" :disable="false"
                @change-i-g-i="igiform = true" @change-check-in="igiform = false"></CheckInForm1>
              <q-separator inset v-if="!igiform" />
              <div v-if="!igiform" class="q-ma-md sub-header">Part 2</div>
              <CheckInForm2 v-if="!igiform" :disable="false"></CheckInForm2>
            </div>
            <!-- </q-tab-panel> -->

            <!-- <q-tab-panel name="part2" class="col-12">
              </q-tab-panel> -->
            <!-- </q-tab-panels> -->
            <!-- 
            <div class="col-4">
              <div class="q-pa-md">
                <div class="q-gutter-sm">
                  <QRCodeComponent :action="'GET'"></QRCodeComponent>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </q-card>
    </div>
  </CheckInContainer>

  <q-dialog v-model="jobOrderNotice" :onHide="() => goCheckInPage()">
    <MyDialog title="Notice" :ok="goCheckInPage"
      :content="`The maintenance order [${newOrder['Order Number']}] is created. `">
    </MyDialog>
  </q-dialog>
</template>

<script setup lang="ts">
import CheckInForm1 from 'src/components/checkInOut/CheckInForm1.vue';
import CheckInForm2 from 'src/components/checkInOut/CheckInForm2.vue';
import CheckInContainer from 'src/components/container/CheckInContainer.vue';
import { useCheckinStore } from 'src/stores/checkinStore';
import { useRoute, useRouter } from 'vue-router';
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import PartsMap from 'src/components/PartsMap.vue';
import { Parts } from 'src/services/type';
import { getPartDetailData } from 'src/services/partsService';
import MyDialog from 'src/components/container/MyDialog.vue';
import { getStatusColor } from 'src/utils/getPublic';
import IGIForm from 'src/components/checkInOut/IGIForm.vue';
import { createRepairOrder } from 'src/services/repairService';
import { use } from 'echarts';

const props = defineProps<{
  orderId?: number;
  partId?: number;
}>();

const tab = ref('return');
const router = useRouter();
const afterClick = ref(false);
const useCheckin = useCheckinStore();
const q = useQuasar();

const igiform = ref(false);

const formType = ref('Maintenance');

const disableSubmit = ref(false);

const jobOrderNotice = ref(false);
const newOrder = ref();
async function save() {
  if (disableSubmit.value) {
    q.notify({
      message: 'Form is submitted',
      color: 'negative',
    });
    return;
  }
  if (useCheckin.repairOrder.mtce_type == 'IGI') {
    if (!useCheckin.igi.received_date) {
      q.notify({
        message: 'Please Check "Received Date" Field',
        color: 'negative',
      })
      return
    }
    const igiForm = {
      ...useCheckin.repairOrder,
      po_no: useCheckin.igi.po_no,
      inspection_no: useCheckin.igi.inspection_no,
      received_date: useCheckin.igi.received_date,
      mtce_type: 'IGI',
      // clear normal check in form
      cews_order_no: '',
      work_order_no: '',
      car: '',
      report_date: '',
      location: '',
      department: '',
      failure_symptom: '',
      description: '',
      remark: '',
      status: '',
      io_counter: '',
      parent_work_order_no: '',
      contractor_liability: '',
      dlc_form_no: '',
      designated_person_name: '',
      date: '',
      line: '',
      line_work_order: '',
      delay_i: '',
      delay_a: '',
    };

    const res = await createRepairOrder(igiForm);
    disableSubmit.value = true;

    if (res) {
      jobOrderNotice.value = true;
      newOrder.value = res.data.qr_code;

      q.notify({
        message: 'success',
        color: 'positive',
      });
      useCheckin.clear();
    }
    disableSubmit.value = false;
  } else {
    if (
      useCheckin.repairOrder.work_order_no.length != 10 &&
      Number.isInteger(parseInt(useCheckin.repairOrder.work_order_no))
    ) {
      q.notify({
        message: 'Work Order should be 10 numbers',
        color: 'negative',
      });
      return;
    }

    if (
      useCheckin.repairOrder.report_date == '' ||
      // useCheckin.repairOrder.department == '' ||
      useCheckin.repairOrder.mtce_type == '' ||
      useCheckin.repairOrder.parent_work_order_no == '' ||
      // useCheckin.repairOrder.io_counter == '' || not required
      useCheckin.repairOrder.description == '' ||
      useCheckin.repairOrder.failure_symptom == '' ||
      useCheckin.repairOrder.check_in_date == ''
    ) {
      q.notify({
        message: 'Check require field',
        color: 'negative',
      });
      return;
    }
    disableSubmit.value = true;
    const data = await useCheckin.submit();
    if (data) {
      jobOrderNotice.value = true;
      newOrder.value = data;
      console.log(newOrder.value);

      q.notify({
        message: 'success',
        color: 'positive',
      });
      useCheckin.clear();
    }
    disableSubmit.value = false;
  }
}

function goCheckInPage() {
  router.push('/checkInOut');
}

const parts = ref<Parts>();

const route = useRoute();

const part_id = parseInt(route.params.id as string);

async function getPart() {
  if (props.partId) {
    const res = await getPartDetailData(props.partId);
    parts.value = res.data;

  } else {
    const res = await getPartDetailData(part_id);
    parts.value = res.data;
  }
}
getPart();
</script>

<style scoped>
.p-status {
  min-width: 350px;
}

.status-color-red {
  width: 42px;
  height: 18px;
  background-color: red;
  margin: 5px;
}

.header {
  font-size: 1.4rem;
  font-weight: 900;
  margin: 10px;
}

.right-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
